<template>
  <div class="emergency_box">
    <div class="emergency_top">
      <div class="emergency_title">已逾期工单</div>
      <div class="emergency_month">
        <div :class="searchDateNumber == 2? 'emergency_ThisMarch1':'emergency_March'" @click="getList(2)"><span>近三个月</span></div>
        <div :class="searchDateNumber == 1? 'emergency_ThisMarch1':'emergency_LastMarch'" @click="getList(1)"><span>上月</span></div>
        <div :class="searchDateNumber == 0? 'emergency_ThisMarch2':'emergency_ThisMarch'" @click="getList(0)"><span>本月</span></div>
      </div>
    </div>

    <div class="echarts_container">
      <div class="echarts_container">
        <div class="header" style="background:rgba(107, 189, 255, 0.2)">
          <div class="flex_item">工单类型</div>
          <div class="flex_item2">设备信息</div>
          <div class="flex_item">逾期工单号</div>
          <div class="flex_item2">计划时间</div>
          <div class="flex_item">人员信息</div>
        </div>
        <div v-if="tableData&&tableData.length>0" class="page-example3">
          <vue-seamless-scroll :data="tableData" :class-option="defaultOption" @ScrollEnd="ScrollEnd">
            <div v-for="(item,index) in tableData" :key="index" class="header header_line">
              <div class="flex_item item_color">{{ item.type }}</div>
              <div class="flex_item2 item_color">{{ item.deviceName }}</div>
              <div class="flex_item item_color">{{ item.code }}</div>
              <div class="flex_item2 item_color">{{ item.planTime }}</div>
              <div class="flex_item item_color">{{ item.checkPersonName }}</div>
            </div>
          </vue-seamless-scroll>
        </div>
        <div v-else class="echarts_noData">
          <svg-icon icon-class="暂无数据" />
        </div>
      </div>

    </div>
    <!-- <div v-else class="echarts_noData">
      <svg-icon icon-class="暂无数据" />
    </div> -->
  </div>
</template>

<script>
import { overRecords } from '@/api/system/largeScreen'
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
  components: {
    vueSeamlessScroll
  },
  data() {
    // 这里存放数据
    return {
      tableData: [],
      searchDateNumber: 0,
      type: 3,
      timer: undefined
    }
  },
  // 监听属性 类似于data概念
  computed: {
    defaultOption() {
      return {
        step: 0.1,
        limitMoveNum: 6, // 开始无缝滚动的数据量
        hoverStop: true, // 是否开启鼠标悬停stop
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 180, // 单步运动停止的高度(默认值0是无缝不停止的滚动)
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    }
  },
  // 监控data中的数据变化
  watch: {
    tableData(newValue, oldValue) {
      // if (newValue.length < 6) {
      //   clearInterval(this.timer)
      //   this.timer = setInterval(() => {
      //     this.getRepairingDetails()
      //   }, this.$store.state.common.refreshFrequency * 1000)
      // } else {
      //   clearInterval(this.timer)
      // }
    }
  },
  beforeDestroy() {
    // 页面关闭清除定时器
    clearInterval(this.timer)
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getList(0)
    this.timer = setInterval(() => {
      this.getList(this.searchDateNumber)
    }, this.$store.state.common.refreshFrequency * 1000)
  },
  // 方法集合
  methods: {
    ScrollEnd() {
      this.getList(this.searchDateNumber)
    },
    getMarchList() {
      this.searchDateNumber = 2
      overRecords({ companyId: this.$store.state.user.companyId, type: 1 }).then(res => {
        this.tableData = res.data
        console.log(res)
      })
    },
    getLastMarchList() {
      this.searchDateNumber = 1
      overRecords({ companyId: this.$store.state.user.companyId, type: 2 }).then(res => {
        this.tableData = res.data
        console.log(res)
      })
    },
    getList(num) {
      switch (num) {
        case 0:
          this.type = 3
          break
        case 1:
          this.type = 2
          break
        case 2:
          this.type = 1
          break
      }
      this.searchDateNumber = num
      overRecords({ companyId: this.$store.state.user.companyId, type: this.type }).then(res => {
        this.tableData = res.data
      })
    }
  }
}
</script>

<style lang="less" scoped>
.emergency_box{
  width: 100%;
  height: calc(100% - 50px);
}
  .emergency_top{
    display: flex;
    justify-content: space-between;
    .emergency_title{
      font-size: 20px;
      line-height: 34px;
      font-weight: bold;
      letter-spacing: -0.21px;
      color: #333333;
      padding-top: 16px;
      padding-left: 20px;
    }
    .emergency_month{
      display: flex;
      font-size: 18px;
      font-weight: normal;
      line-height: 25px;
      letter-spacing: -0.16px;
      color: #999999;
      padding-top: 22px;
      padding-right: 20px;
      cursor: pointer;
      .emergency_ThisMarch1{
        font-size: 18px;
        font-weight: normal;
        line-height: 25px;
        letter-spacing: -0.16px;
        color: #387BFC;
        padding-right: 30px;
      }
      .emergency_ThisMarch2{
        font-size: 18px;
        font-weight: normal;
        line-height: 25px;
        letter-spacing: -0.16px;
        color: #387BFC;
      }
      .emergency_March{
        padding-right: 30px;
      }
      .emergency_LastMarch{
        padding-right: 30px;
      }
    }
  }

.echarts_container{
  width: 100%;
  height: 100%;
  padding:5px 10px;
  .header{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    padding:4px 0 ;
    border-bottom: 1px solid #15AFCD;
    .flex_item{
        flex: 1;
        text-align: center;
    }
    .flex_item2{
        text-align: center;
        flex: 2;
    }
    .item_color{
        color: rgba(102, 102, 102, 1);
        font-size: 15px;
    }
  }
  .header_line{
     border-bottom: 0.5px solid rgba(153, 153, 153, 0.2);
  }
}
    .page-example3{
        width: 100%;
        height: 181px;
        overflow: hidden;
    }
</style>

